<template>
    <div class="box">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a href="/home">安排管理</a></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="operate">
            <div style="padding: 10px">
                <div class="add">
                    <el-button type="primary" @click="addArrange">添加安排</el-button>
                </div>
                <div class="bankname">请输入安排名：</div>
                <div class="input">
                    <el-input v-model="key" class="w-50 m-2" placeholder="请输入想要查找的安排名" @change="search" />
                </div>
            </div>
            <el-skeleton :rows="6" :loading="loading" animated>
                <el-table v-loading="VLoading" class="table" border :data="tableData">
                    <el-table-column prop="aname" label="安排名" width="180" />
                    <el-table-column prop="aexplain" label="描述" width="180" />
                    <el-table-column prop="AAuthor" label="安排人" width="180">
                        <template #default="scope">
                            <el-tag disable-transitions>
                                {{ scope.row.AAuthor == null ? "隐藏" : scope.row.AAuthor }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="atpname" label="试卷名" width="180" />
                    <el-table-column label="培训班名" width="180">
                        <template #default="scope">
                            {{ scope.row.arelationid == "" ? "没有培训班" : scope.row.arelationid }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="abegintime" label="开始时间" width="180" />
                    <el-table-column prop="aendtime" label="结束时间" width="180" />
                    <el-table-column label="标签" width="100">
                        <template #default="scope">
                            <el-tag disable-transitions>
                                {{ scope.row.atype == 1 ? "普通安排" : "培训班安排" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="180">
                        <template #default="scope">
                            <el-button type="primary" @click="detalisArrange(scope)" size="small">
                                详情
                            </el-button>
                            <el-button type="danger" @click="Delete(scope)" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paging">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
                    </el-pagination>
                </div>
            </el-skeleton>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Arrange } from "@/utils/Exam/arrange/arrange";
import { GetArranges } from "@/api/Product/exaam";
import router from "@/router";
import { ElMessage } from "element-plus";

var _exam = new GetArranges();

export default defineComponent({
    setup() {
        const data = reactive<Arrange>({
            tableData: [],
            key: "",
            timekey: "",
            checkbox: 0,
            VLoading: false,
            loading: true,
            pages: {
                page: 1,
                limit: 5,
                total: 10,
            },
        });
        const methods = {
            GetArrange() {
                data.VLoading = true,
                    _exam.GetArrange({
                        page: data.pages.page,
                        limit: data.pages.limit,
                        key: data.key,
                    }).then((res: any) => {
                        if (res.code === 0) {
                            data.VLoading = false,
                                res.data.data.forEach((e: any) => {
                                    e.abegintime = e.abegintime.replace("T", " ")
                                    e.aendtime = e.aendtime.replace("T", " ")
                                });
                            data.loading = false;
                            data.tableData = res.data.data
                            data.pages.total = res.data.total
                        }
                    })
            },
            Delete(val: any) {
                let dto = [{
                    aid: val.row.aid
                }]
                _exam.DeleteArrange(dto).then((res: any) => {
                    if (res.code === 0) {
                        ElMessage.success(res.message);
                        methods.GetArrange();
                    } else {
                        ElMessage.error(res.message)
                    }
                })
            },
            //模糊查询
            search(val: any) {
                data.key = val;
                methods.GetArrange();
            },
            //添加安排
            addArrange() {
                router.push("/arrange/addArrange");
            },
            //详情
            detalisArrange(val: any) {
                router.push("/arrange/Arrange/" + val.row.aid);
            },
            handleSizeChange(val: number) {
                data.pages.limit = val;
                methods.GetArrange();
            },
            handleCurrentChange(val: number) {
                data.pages.page = val;
                methods.GetArrange();
            },

        };
        onMounted(() => {
            methods.GetArrange();
        })
        return {
            ...toRefs(data),
            ...methods,
        };
    },
});
</script>
<style scoped>
.operate {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    background-color: white;
    width: 94%;
}

.crumbs {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin: 15px;
    background-color: white;
    width: 94%;
}

.table {
    width: 95%;
    margin: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.input {
    margin-left: 10px;
    width: 300px;
    display: inline-block;
}

.block {
    display: inline-block;
}

.check {
    margin-left: 30px;
    display: inline-block;
}

.add {
    margin-left: 50px;
    display: inline-block;
}

.delete {
    margin-left: 50px;
    display: inline-block;
}

.paging {
    margin: 20px;
}

.bankname {
    display: inline-block;
    margin-left: 20px;
    padding: 5px;
}
</style>
